// text classes
.text-primary {
  color: $primary !important;
}

.text-success {
  color: $success !important;
}

.text-danger {
  color: $danger !important;
}

.text-warning {
  color: $warning !important;
}

.text-dark {
  color: $dark !important;
}

// background classes
.bg-primary {
  background-color: $primary !important;
}

.bg-success {
  background-color: $success !important;
}

.bg-danger {
  background-color: $danger !important;
}

.bg-warning {
  background-color: $warning !important;
}

.bg-dark {
  background-color: $dark !important;
}

.bg-primary-gradient {
  background: linear-gradient(118deg, rgba(var(--vs-primary), 1), rgba(var(--vs-primary), .7)) !important;
}

.bg-gray-150 {
  background-color: rgba(var(--vs-primary), 0.06);
}

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-shadow {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); // 基础投影
}

.base-shadow {
  box-shadow: $base-shadow;
}

.light-shadow {
  box-shadow: $light-shadow;
}

.heavy-shadow {
  box-shadow: $heavy-shadow;
}

.radius {
  border-radius: $large-radius;
}

.flex-row-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.transition {
  transition: all 0.3s;
}

.quickly {
  animation-duration: 0.2s !important;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}